<template>
	<view class="container patient-detail-container">

		<view class="page-main">
			<view class="page-list">
				<view class="user-top">
					<image class="list-img" :src="pageData.headPortrait" @error="$handleImageError(pageData,'headPortrait')" mode="widthFix"></image>
					<view>
						<view class="list-name">{{pageData.patientName||'-'}}</view>
						<view class="list-item">
							<text class="list-info c-primary" v-if="pageData.gender==='男'">男</text>
							<text class="list-info c-danger" v-else>女</text>
							<text class="list-info" style="margin-left: 30rpx;">{{pageData.age}}</text>
						</view>
					</view>
				</view>
				<view style="margin-top: 30rpx;">
					<view class="list-item">
						<text class="list-title">手机号：</text>
						<text class="list-info">{{pageData.phone}}</text>
					</view>
					<view class="list-item">
						<text class="list-title">就诊次数：</text>
						<text class="list-info">{{clinicRecordS.length}}次</text>
					</view>
					<view class="list-item">
						<text class="list-title">科室：</text>
						<text class="list-info">{{pageData.department}}</text>
					</view>
					<view class="list-item">
						<text class="list-title">诊断：</text>
						<text class="list-info">{{pageData.diagnosisResult}}</text>
					</view>
					<!-- <view class="list-item">
						<text class="list-title">基本信息：</text>
					</view>
					<view class="list-item">
						<text class="list-info">无过敏史、过往病史、家族病史、无妊娠哺乳</text>
						
					</view> -->
				</view>
				
				
			</view>
			<view class="page-list">
				<view class="list-name">就诊记录</view>
				<view class="list-log">
					<view class="log-list" v-for="(item,idx) in clinicRecordS" :key="'clinicRecordS_'+idx">
						<view class="list-item">
							<text class="list-title">医馆名称：</text>
							<text class="list-info ">{{item.consultationDate}}</text>
						</view>
						<view class="list-item">
							<text class="list-title">科室：</text>
							<text class="list-info ">{{item.department}}</text>
						</view>
						<view class="list-item">
							<text class="list-title">诊断：</text>
							<text class="list-info ">{{item.diagnosisResult}}</text>
						</view>
						<view class="list-item">
							<text class="list-title">就诊时间：</text>
							<text class="list-info ">{{$format(item.visitTime)}}</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>


	</view>
</template>


<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { getStorage, hideLoading, showLoading } from '../../common/util';
import userApi from '../../common/userApi';
	const isLoading = ref(false)
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(async () => {
		await getPageData()
	})

	const pageData=ref<any>({})
	const clinicRecordS=ref<any[]>([])
	const getPageData = async () => {
		showLoading()
		isLoading.value = true
		try {
			let params:any = {
				pageId,
				pcUserId:getStorage('userAuth').pcUserId,
			}
			const res = await userApi.getPatientsDetail(params)
			pageData.value=res.data.vo
			clinicRecordS.value=res.data.clinicRecordS ||[]
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
</script>


<style lang="scss">
	.patient-detail-container {
		background: linear-gradient(180deg, #DAFBFB 0%, #D7E5FF 8%, #F2F3F8 40%, #F2F3F8 100%);
		padding-bottom: 120rpx;
		padding-top: 30rpx;
		.page-main {
			padding: 0 30rpx;
		}

		.page-list {
			margin-bottom: 20rpx;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 10rpx;
		}
		.user-top{
			display: flex;
			align-items: center;
		}

		.list-img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 25rpx;
			flex-shrink: 0;
		}

		.list-name {
			font-weight: bold;
			font-size: 28rpx;
			color: #202020;
		}

		.list-item {
			font-size: 28rpx;
			margin-bottom: 15rpx;
		}

		.list-title {
			color: #6D6D6D;
			margin-right: 15rpx;
		}

		.list-info {
			color: #222222;
		}
		.list-log{
			background-color: #F5F6FA;
			padding: 0 20rpx;
			margin-top: 30rpx;
			border-radius: 10rpx;
		}
		.log-list{
			border-bottom: solid 1px #eee;
			padding: 20rpx 0;
		}
	}
</style>